# 引用 CSS 文件

Rsbuild 对 CSS 提供开箱即用的支持，包括 PostCSS、CSS Modules、CSS 预处理器、CSS 内联和 CSS 压缩。

除此之外，Rsbuild 也提供了多个配置项来自定义样式资源的处理规则。

## 使用 PostCSS

Rsbuild 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。你可以通过以下方式来配置 PostCSS：

1. Rsbuild 使用 [postcss-load-config](https://github.com/postcss/postcss-load-config) 来加载当前项目根目录下的 PostCSS 配置文件，比如 `postcss.config.js`：

```js title="postcss.config.js"
module.exports = {
  'postcss-px-to-viewport': {
    viewportWidth: 375,
  },
};
```

2. 通过 Rsbuild 的 [tools.postcss](/config/tools/postcss) 选项来配置 postcss-loader，该选项支持通过函数来修改内置配置，比如：

```ts title="rsbuild.config.ts"
export default {
  tools: {
    postcss: (opts) => {
      const viewportPlugin = require('postcss-px-to-viewport')({
        viewportWidth: 375,
      });
      opts.postcssOptions.plugins.push(viewportPlugin);
    },
  },
};
```

当你同时配置 `postcss.config.js` 文件和 `tools.postcss` 选项时，两者都会生效，并且 `tools.postcss` 的优先级更高。

### 内置 PostCSS 插件

Rsbuild 内置了[autoprefixer](https://github.com/postcss/autoprefixer) 插件，来自动补齐 CSS 的浏览器前缀。如果你需要配置目标浏览器，可以使用 [browserslist](/guide/advanced/browserslist) 进行配置。

:::tip
如果你的项目中已经注册了 autoprefixer 插件，Rsbuild 不会再次注册 autoprefixer 插件。
:::

## 使用 CSS Modules

Rsbuild 默认支持 CSS Modules，请阅读 [使用 CSS Modules](/guide/basic/css-modules) 章节来了解 CSS Modules 的完整用法。

## 使用 CSS 预处理器

Rsbuild 通过插件来支持社区流行的 CSS 预处理器，包括 Sass、Less 和 Stylus，使用方式请参考：

- [Sass 插件](/plugins/list/plugin-sass)
- [Less 插件](/plugins/list/plugin-less)
- [Stylus 插件](/plugins/list/plugin-stylus)

## CSS-in-JS

请阅读 [React - CSS-in-JS](/guide/framework/react#css-in-js) 章节来了解如何在 Rsbuild 中使用常见的 CSS-in-JS 库。

## CSS 压缩

在生产环境构建时， Rsbuild 会将 CSS、JS 等静态资源进行压缩，以达到更好的传输效率。

Rsbuild 默认使用 Rspack 内置的 `SwcCssMinimizerRspackPlugin` 插件，在生产环境构建时自动压缩 CSS 代码。

你可以通过 [CSS Minimizer 插件](/plugins/list/plugin-css-minimizer) 来自定义 CSS 压缩工具，切换到 cssnano 或其他工具进行 CSS 压缩。

## 内联 CSS 文件

默认情况下，Rsbuild 会把 CSS 提取为独立的 `.css` 文件，并输出到构建产物目录。

如果你希望将样式内联到 JS 文件中，可以将 [output.injectStyles](/config/output/inject-styles) 设置为 `true` 来禁用 CSS 提取逻辑。当浏览器请求到 JS 文件后，JS 将动态地向 HTML 插入 `<style>` 标签，以此加载 CSS 样式。

```ts
export default {
  output: {
    injectStyles: true,
  },
};
```

这将会增大你的 JS Bundle 体积，因此通常情况下，不太建议禁用 CSS 提取逻辑。

## 引用 node_modules 里的样式

你可以直接引用 node_modules 里的样式文件。

- 在组件中引用：

```ts title="src/App.tsx"
// 引用 Arco Design 样式：
import '@arco-design/web-react/dist/css/arco.css';
```

- 在样式文件中引用：

```css title="src/App.css"
/* 引用 normalize.css */
/* https://github.com/necolas/normalize.css */
@import 'normalize.css';

body {
  /* */
}
```
